<!DOCTYPE html>
<html>

<head>
    <title>生成插件图标</title>
</head>

<body>
    <canvas id="icon16" width="16" height="16"></canvas>
    <canvas id="icon48" width="48" height="48"></canvas>
    <canvas id="icon128" width="128" height="128"></canvas>
    <script>
        // 生成图标的函数
        function drawIcon(canvas) {
            const ctx = canvas.getContext('2d');
            const size = canvas.width;

            // 设置背景色
            ctx.fillStyle = '#4CAF50';
            ctx.fillRect(0, 0, size, size);

            // 画一个简单的相机图标
            ctx.fillStyle = 'white';
            const padding = size * 0.2;
            const innerSize = size - (padding * 2);

            // 相机主体
            ctx.fillRect(padding, padding, innerSize, innerSize);

            // 镜头
            ctx.fillStyle = '#4CAF50';
            const lensSize = innerSize * 0.6;
            const lensX = (size - lensSize) / 2;
            const lensY = (size - lensSize) / 2;
            ctx.beginPath();
            ctx.arc(size / 2, size / 2, lensSize / 2, 0, Math.PI * 2);
            ctx.fill();
        }

        // 生成三种尺寸的图标
        ['icon16', 'icon48', 'icon128'].forEach(id => {
            const canvas = document.getElementById(id);
            drawIcon(canvas);

            // 下载图标
            const link = document.createElement('a');
            link.download = id + '.png';
            link.href = canvas.toDataURL('image/png');
            link.click();
        });
    </script>
</body>

</html>